
//创建一级标题
import React from 'react'

//1.引入ant标签
import { Tabs, Badge } from 'antd-mobile'

//3.引入本身的less样式
import './IndexShop.less'

//4.引入环境变量展示图片
import { $pre } from '../../../../http/http'

//3.引入路由实现页面跳转 withRouter伴随路由,可以让非路由组件实现页面的跳转
import { Link, withRouter } from 'react-router-dom'

import { JumboTabs } from 'antd-mobile'

//2.向外暴露Cate组件
function Cate(props) {

    //接收父组件传递过来的cate列表数据
    let { indexShop, arr, changeN, n } = props
    //输出n

    return (
        <JumboTabs onchange={key=>changeN(key)}>
            {arr.map((item, index) => {
                return (
                    <JumboTabs.Tab title={item.title} key={index+''}>
                        {indexShop.map((item, index) => {
                            return (//3.map遍历cate中的名字 组成新数组展示
                                <div title={item} key={index}>
                                        <ol>
                                            <div >
                                                {item.content.map(i => {
                                                    return <li className='shopItem' key={i.id} onClick={() => props.history.push('/detail/' + i.id)}>
                                                        <img src={$pre + i.img} alt="" />
                                                        <div className='right'>
                                                            <h2>{i.goodsname}</h2>
                                                            <p>{i.price}</p>
                                                            <div className='iconfont' onClick={(e) => {
                                                                //阻止冒泡
                                                                e.stopPropagation()
                                                                props.history.push('/shop/' + i.id)
                                                            }}> 加入购物车</div>
                                                        </div>
                                                    </li>
                                                })}
                                            </div>
                                        </ol>
                                </div>
                            )
                        })}
                    </JumboTabs.Tab>
                )
            })}
        </JumboTabs>
    )
}

export default withRouter(Cate)

